<template>
  <div id="app">
    <header_y></header_y>
    <div class="container-y">
      <div class="container-y1">
        <transition :enter-class="slideIn" :leave-active-class="slideOut">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
  import header_y from "./components/header.vue";
  import {mapState} from "vuex"
  export default {
    name: 'app',
    components: {
      header_y,
    },
    computed: {
      ...mapState([
        'slideIn',
        'slideOut'
      ])
    }
  }
</script>

<style lang="scss">
  #app {
    background-color: #f6f4f9;
    color: #525252;
    position: relative;
  }

  .container-y {
    padding-top: 40px;
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    .container-y1 {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }

  .container-a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f6f4f9;
    overflow-x: hidden;
    overflow-y: scroll;
    transition: all 0.3s ease;
  }

  .slide-left-enter, .slide-left-leave {
    opacity: 0;
    -webkit-transform: translate(200px, 0);
    transform: translate(200px, 0);
  }

  .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-20px, 0);
    transform: translate(-20px, 0);
  }

  .slide-right-enter2 {
    opacity: .6;
    -webkit-transform: translate(-30px, 0);
    transform: translate(-30px, 0);
  }

  .slide-up-enter {
    opacity: 0;
    -webkit-transform: translate(0, 30px);
    transform: translate(0px, 30px);
  }

  .slide-right-leave {
    opacity: 0.6;
  }

  .vux-datetime {
    color: #525252 !important;
  }
  .dp-header .dp-item.dp-right{
    color: #5fbdff!important;
  }
</style>
